<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
</head>
<body>
    <table>
        <tr>
            <td>
                <label for="">用户名：</label>
            </td>
            <td>
                <input type="text" name="username" placeholder="请输入用户名">  <!-- 框框里有内容 -->
            </td>
        </tr>
        <tr>
            <td>
                <label for="">密码：</label>
            </td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="登录" onclick="login()">
            </td>
            <td>
                <input type="button" value="注册">
            </td>
        </tr>
    </table>

    <script src="./js/jquery-3.6.0.min.js"></script>  <!-- 引入jQuery -->
    <script>
        // $(function(){
        //     console.log('登录页面已初始化');  /* 控制台输出内容说明jquery引入成功，接下来传参进入后台 */
        // })
        function login(){
            //console.log('你点了登录');  /* 在控制台会显示，说明点击登录会有响应，说明onclick可以用,接下来引入jQuery */
            //1.获取用户填写的用户名和密码
            //2.利用jQuery发送post请求，当然也可以get请求（login?username=xxx&&password=xxx，所以get不合适）

            let username=$('[name=username]').val()  /* 获取用户名username */
            let password=$('[name=password]').val()  /* 获取密码password */

            //console.log(username);   /* 在页面输入用户名密码后控制台会输出所输入的用户名和密码就说明该方法可以使用，获取用户数据后使用post请求 */
            //console.log(password);

            let obj={username,password}  /* 对获取的用户数据进行包装便于发送post请求 */
            $.post('http://localhost:3000/login',obj,(res)=>{  /* jQuery.post请求方法，百度 */
                //console.log(res);    /* 看服务端有没有对应的路由 */
                if(res.code===1000){  //登陆成功跳转
                    window.location.href='./index.html'  //跳转后后的页面
                }else{
                    alert(res.msg)   //登陆失败跳转，跳转内容后端写了
                }
            })
        }
    </script>
</body>
</html>